<template>
    <div>
           <!-- 轮播图区域 -->
    <mt-swipe :auto="4000">
      <!-- 在组件中，使用v-for循环的话，一定要使用 key -->
      <!-- 将来谁使用此轮播图组件 谁为我们传递lunbotuList -->
      <!-- 此时 lunbotuList应该是父组件像子组件传值来设置 -->
      <mt-swipe-item v-for="item in lunbotuList" :key="item.id">
        <img :src="item.img" alt="" :class='{full:isfull}'>
      </mt-swipe-item>
    </mt-swipe>
    </div>

    <!-- 分析为什么商品评论中的轮播图 那么丑 -->
    <!-- 1 、首页中的图片的宽和高都是100% -->
    <!-- 2、商品详情中的轮播图 如果也是用100% 不好看 -->
    <!-- 3、商品详情中的轮播图 希望 高度度100% 宽度度自适应 -->
    <!-- 4、 经过分析得到问题的原因：首页中的轮播图 和 详情中的轮播图 分歧点是 宽度到底是100%还是自适应 -->
  <!-- 5、既然两个轮播图只是宽度有分歧 那么我们可以定义一个属性
    让轮播图的使用者 手动指定是否为100%的宽度
   -->
</template>
<script>
import { Toast } from "mint-ui";
export default {
    props:["lunbotuList","isfull"]
}
</script>
<style lang="scss" scoped>
    .mint-swipe {
  height: 200px;

  .mint-swipe-item {
    text-align:center; 
   

    img {
      // width: 100%;
      height: 100%;
    }
  }
}
.full{
  width:100%;
}
</style>